<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒模型</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .box {
      /* 盒子组成: 外边距 + 边框 + 内边距 + 内容区 */
      margin: 10px auto auto 20px;
      padding: 10px;
      border: 1px solid red;
      width: 100px;
      height: 100px;
      background-color: #bfa;
      /* 超出部分隐藏 */
      overflow: hidden;
      /* text-wrap: nowrap; */
      /* white-space: nowrap; */
      opacity: .9;
      /* 重合边框合并, 表格用的比较多 */
      /* border-collapse: collapse; */
      /* width height 设置的是盒子边框, 还是内容区大小 */
      /* box-sizing: border-box; */
      /* 默认值 */
      box-sizing: content-box;
    }
  </style>
</head>
<body>
  <!-- 可见框, 包含块 -->
  <div class="box">
    this is a message box, notice for users
    this is a message box, notice for users
  </div>
</body>
</html>